<template>
	<div class="search">
		<div class="tl" align="left">
			<span
				v-for="(item, index) in resultData"
				:key="index"
				:data-name="item.code"
				:class="{ active: index == active }"
				@click="toggleChange(index), handleChangeTime($event)"
				>{{ item.text }}
			</span>
			<span v-if="showTime">
				<el-date-picker
					v-model="timeVal"
					type="datetimerange"
					range-separator="至"
					start-placeholder="开始日期"
					format="yyyy-MM-dd"
					:unlink-panels="false"
					clearable
					size="small"
					value-format="yyyy-MM-dd "
					end-placeholder="结束日期"
					@change="getSelfTime"
				>
				</el-date-picker>
			</span>
		</div>
	</div>
</template>

<script>
// 时间选择组件
import { getDate } from "utils/formattime.js"
import SearchTime from "@/components/common/SearchTime"

export default {
	props: {
		initTimeDatas: {
			type: Array,
			required: true
		}
	},
	data () {
		return {
			showTime: false,
			timeVal: [],
			resultData: [],
			activeName: null,
			initData: [ { text: "自定义", code: "self" } ],
			spanCol: 4,
			active: 0
		};
	},
	components: { SearchTime },
	computed: {},
	created () {
		this.resultData = [ ...this.initTimeDatas, ...this.initData ];
		this.spanCol = this.resultData.length + 1;
		this.activeName = "allTime";
		this.handleChangeTime();
		this.getSelfTime();
	},
	mounted () { },
	methods: {
		handleChangeTime ( $event ) {
			console.log( $event.target.getAttribute( "data-name" ) );
			// 选择时间
			const text = $event.target.getAttribute( "data-name" );
			const code = $event.target.getAttribute( "data-name" );
			console.log( text );
			if ( text === "self" ) {
				// 自定义时间
				this.showTime = true;
			} else {
				this.showTime = false;
				if ( text !== "allTime" ) {
					this.$emit( "getChangeTime", getDate( code ) );
				} else {
					// 全部时间 返回空
					this.$emit( "getChangeTime", {
						start_date: null,
						end_date: null
					} );
				}
			}
		},

		getSelfTime () {
			//  时间选择
			console.log( this.timeVal );
			if ( this.timeVal !== null ) {
				this.$emit( "getChangeTime", {
					start_date: this.timeVal[ 0 ],
					end_date: this.timeVal[ 1 ]
				} );
			} else {
				// 时间格式选择异常
				this.$emit( "getChangeTime", {
					start_date: null,
					end_date: null
				} );
			}
		},
		toggleChange ( index ) {
			this.active = index;
		}
	}
};
</script>

<style lang="less" scoped>
.search {
	margin-bottom: 15px;
}
.el-date-range-picker__date-header {
	display: none !important;
}
.el-date-range-picker {
	margin-top: 25px;
}
.time_item {
	margin-right: 20px;
}
.active {
	color: #0a70b0;
	background: #ffffff;
	border: 1px solid #0a70b0;
	border-radius: 4px;
	padding: 0 5px;
}
span {
	font-size: 14px;
	margin-right: 20px;
	width: 50px;
	height: 30px;
	line-height: 30px;
	cursor: pointer;
}
</style>
